import * as React from 'react'
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'
import { Row, Col, Input } from 'antd/es';

export default class BasicBlankQuiz extends React.Component<any>{

    getCorrect(singleQuiz:any) {
        if (singleQuiz.isCorrect) {
            return '✅'
        } else if (singleQuiz.isCorrect === '') {
            return ''
        } else {
            return '❌'
        }
    }
    changeAnswer = (quizId: number, answer: string) => {
        this.props.modifyAnswer(quizId, answer)
    }

    getValue(singleQuiz:any) {
        if (singleQuiz) {
            return parseInt(singleQuiz.userAnswer, 10)
        }
        return -1
    }

    render() {
        const { index, quiz } = this.props
        let { description } = quiz
        const answer = `${this.getCorrect(quiz)}`
        return <div className='markdown-wrap'>
            <TwsReactMarkdownPreview source={`${index + 1}. ${description}`} />
            <Row className='margin-t-2'>
                {quiz.answer
                    ? <Col span={24} >
                        <TwsReactMarkdownPreview source={quiz.userAnswer} />
                        <div className='margin-t-2' />
                        <TwsReactMarkdownPreview source={answer} />
                    </Col>
                    : <Col span={20}>
                        <Input onChange={(e:any)=>this.changeAnswer(quiz.id,e.target.value)} />
                    </Col>
                }
            </Row>
        </div>
    }
}